---

title: Web Styles
description: Learn about web styles in Unistyles 3.0

---

import Seo from '../../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Web Styles',
        description: 'Learn about web styles in Unistyles 3.0'
    }}
>

Unistyles Web is independent from React Native Web, utilizing a custom web parser that directly generates CSS from your `StyleSheet` definitions.

### How It Works

Unistyles web parser generates unique `classNames` for your styles and assigns them to corresponding DOM elements. This ensures that only the necessary styles are applied, avoiding redundancy. Additionally, media queries are automatically created based on your `breakpoints`, eliminating the need for recalculation on every resize.

Example:

```ts
const styles = StyleSheet.create({
    container: {
        flex: 1,
        fontSize: 32,
    },
    text: {
        fontSize: {
            xs: 28,
            lg: 40
        },
    },
    parentContainer: {
        flex: 1,
    }
})
```

Will produce the following CSS output:

```css
# because flex: 1 is shared across multiple styles
.unistyles_1u0egm6 {
  flex: 1;
}

# to cover "container" fontSize
@media (min-width: 0px) {
  .unistyles_kaoph5 {
    font-size: 32px;
  }
}

# to cover "text" fontSize
@media (min-width: 1200px) {
  .unistyles_kaoph5 {
    font-size: 40px;
  }
}
```

### Updating Styles

When you change your app's theme, Unistyles automatically updates your CSS without triggering any re-renders. This applies to dynamic functions and variants as well.

For instance, if you define your styles dynamically:

```ts
const styles = StyleSheet.create(theme => ({
    container: {
        flex: 1,
        backgroundColor: theme.colors.background
    }
}))
```

The generated CSS might look like this:

```css
.unistyles_1u0egm6 {
  flex: 1;
  background-color: #000;
}
```

Upon switching the theme:

```ts
UnistylesRuntime.setTheme('light')
```

The CSS will automatically update to:

```css
.unistyles_1u0egm6 {
  flex: 1;
  background-color: #fff;
}
```

### Limitations

Due to Unistyles custom parser, styles cannot be accessed directly as they would be with React Native Web. Passing styles to the `RNW` parser would modify them and generate unnecessary new classes.

As a result, when you try to `console.log` the styles, there will be no output:

```ts
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})

// This will result in an empty object since we generate classes instead of inline styles
console.log(styles) // {}
```

### Web-Only Features

Unistyles includes some features specific to the web. Learn more about them [here](/v3/references/web-only).

</Seo>
